<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <Navbar logoText="易交易管理系统">
      <template #nav-links>
        <a href="#" class="nav-link active">管理首页</a>
        <a href="/admin/users" class="nav-link">用户管理</a>
        <a href="/admin/products" class="nav-link">商品管理</a>
        <a href="/admin/transactions" class="nav-link">交易管理</a>
        <a href="/admin/announcements" class="nav-link">公告管理</a>
      </template>
    </Navbar>

    <!-- 内容区域 -->
    <div class="content-wrapper">
      <div class="admin-home">
        <h1>管理员专属主页</h1>
        <p>欢迎，管理员！你可以在此管理用户、商品、订单等。</p>
        <!-- 可扩展更多管理功能入口 -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '../components/Navbar.vue';
</script>

<style scoped>
/* 从Home.vue复制的导航栏相关样式 */
.home-container {
  max-width: 100vw;
  margin: 0 auto;
  padding: 0 2vw;
  background-color: #ffffff;
  box-sizing: border-box;
}

.content-wrapper {
  padding-top: 80px; /* 为固定导航栏预留空间 */
}

.home-container .navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid var(--primary-dark);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-light);
  padding: 15px 2vw;
  margin-bottom: 2vh;
}

.home-container .logo {
  font-size: 24px;
  font-weight: 600;
  font-stretch: semi-expanded;
  color: var(--primary-text);
  letter-spacing: 1px;
  font-variant: small-caps;
}

.home-container .nav-links a {
  margin: 0 15px;
  text-decoration: none;
  color: var(--primary-text);
  padding: 6px 12px;
  border-radius: var(--border-radius-sm);
  transition: var(--transition-default);

  &:hover {
    background-color: var(--primary-color);
    transform: translateY(-2px);
  }
}

/* 管理员页面特有样式 */
.admin-home {
  max-width: 700px;
  margin: 60px auto 0 auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  padding: 32px 28px;
  text-align: center;
}

.admin-home h1 {
  color: #2563eb;
  margin-bottom: 18px;
}
</style>
